<template>
  <div>
    <div class="body">
      <el-table
        :data="tableData"
        style="width: 100%"
        row-key="id"
        ref="selectUserMultiple"
        @selection-change="handleSelectionChange"
        border>
        <el-table-column
          type="selection"
          width="55">
        </el-table-column>
        <el-table-column
          prop="code"
          label="人员编号"
          width="180">
        </el-table-column>
        <el-table-column
          prop="nameZh"
          label="姓名"
          width="180">
        </el-table-column>
        <el-table-column
          prop="deptName"
          label="部门"
          width="180">
        </el-table-column>
      </el-table>
      <v-pagination :pageData.sync="pageData" layout="total, sizes, jumper" @refreshPageData="refreshPageData"></v-pagination>
    </div>
  </div>
</template>

<script>
import api from '@/api'
import pagination from '@/views/public/pagination.vue'

export default {
  name: 'select-user-multiple',
  components: {
    'v-pagination': pagination
  },
  props: {
    randomKey: {
      type: Number
    },
    checkedUser: {
      type: Array
    }
  },
  data () {
    return {
      tableData: [],
      pageData: {
        page: 1,
        size: 5,
        totalRows: 0
      }
    }
  },
  mounted () {
    this.getList()
  },
  methods: {
    getList () {
      api.sysUser.onSelectUserInfoList({}, this.pageData).then(res => {
        this.pageData.totalRows = res.totalRows
        this.tableData = res.content
      })
    },
    handleSelectionChange (val) {
      this.checkedUser.users = val
    },
    refreshPageData () {
      this.getList()
    }
  },
  watch: {
    randomKey () {
      this.pageData.page = 1
      this.getList()
      this.checkedUsers = []
    }
  }
}
</script>

<style lang="scss">
  .body {
    padding: 8px;
  }
</style>
